<template>
	<div>
		<el-row>
			<!-- 步骤条 -->
			<el-col :span="24">
				<el-steps :active="step" finish-status="success" align-center style="width:70%;margin:20px auto">
					<el-step title="优惠券基础信息"></el-step>
					<el-step title="优惠券规则信息"></el-step>
					<el-step title="添加完成"></el-step>
				</el-steps>
			</el-col>
			<!-- 第一步 优惠券基础信息 -->
			<el-col :span="24" v-show="step==0">
				<el-card class="box-card" style="width:65%;margin:20px auto">
					<el-form :model="dataForm" ref="dataCouponBaseForm" :rules="dataCouponBaseRule" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
						<el-form-item label="模版名称" prop="name">
							<el-input v-model="dataForm.name" placeholder="请输入优惠券模版名称"></el-input>
						</el-form-item>
						<el-form-item label="模版logo" prop="logo">
							
							<el-input v-model="dataForm.logo" placeholder="请输入优惠券模版logo"></el-input>
						</el-form-item>
						<el-row>
							<el-col :span="12">
								<el-form-item label="优惠券分类" prop="category">
									<el-select v-model="dataForm.category" class="input-width" placeholder="全部" clearable style="width: 100%;" @change="handlerChangeCategory">
										<el-option v-for="item in templateCategoryOptions"
											:key="item.value"
											:label="item.label"
											:value="item.value">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="产  品  线" prop="productLine">
									<el-select v-model="dataForm.productLine" class="input-width" placeholder="全部" clearable style="width: 100%;">
										<el-option v-for="item in productLineOptions"
											:key="item.value"
											:label="item.label"
											:value="item.value">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="总发行量" prop="count">
									<el-input v-model="dataForm.count" placeholder="只能输入正整数" class="input-width"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="目标用户" prop="target">
									<el-radio-group v-model="dataForm.target">
										<el-radio label="1">单个领取</el-radio>
										<el-radio label="2">批量分发</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item label="模版介绍" prop="desc">
							<el-input type="textarea" v-model="dataForm.desc" placeholder="请输入优惠券模版介绍"></el-input>
						</el-form-item>
					</el-form>	
					<el-divider></el-divider>
					<div align="center">
						<el-button type="success" @click="perfectRules" >下一步：设置优惠券规则</el-button>
					</div>
				</el-card>
			</el-col>
			<!-- 第一步 优惠券规则信息 -->
			<el-col :span="24" v-show="step==1">
				<el-card class="box-card" style="width:65%;margin:20px auto">
					<el-form :model="dataForm.rule" ref="dataCouponRuleForm" :rules="dataCouponRule" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
						<!-- 折扣信息-->
						<el-form-item label="额度" prop="discount.quota">
							<el-input class="input-box" v-model="dataForm.rule.discount.quota" placeholder="只能输入正整数" ></el-input>
						</el-form-item>
						<template v-if="dataForm.category !== '002'">
							<el-form-item label="使用门槛" prop="discount.base">
								<el-input class="input-box" v-model.number="dataForm.rule.discount.base" placeholder="只能输入正整数" >
									<template slot="prepend">满</template>
									<template slot="append">元可用</template>
								</el-input>
							</el-form-item>
						</template>
						<!-- 领取限制 -->
						<el-form-item label="每人限领" prop="limitation">
							<el-input class="input-box" v-model.number="dataForm.rule.limitation" placeholder="只能输入正整数" >
								<template slot="append">张</template>
							</el-input>
						</el-form-item>
						<!-- 优惠券过期规则 -->
						<el-form-item label="有效期规则" prop="expiration.period">
							<el-radio-group v-model="dataForm.rule.expiration.period">
								<el-radio :label="1">固定日期</el-radio>
								<el-radio :label="2">变动的</el-radio>
							</el-radio-group>
						</el-form-item>
						<template v-if="dataForm.rule.expiration.period == 2">
							<el-form-item label="有效间隔" prop="expiration.gap">
								<el-input class="input-box" v-model.number="dataForm.rule.expiration.gap" placeholder="只能输入正整数" >
									<template slot="append">天</template>
								</el-input>
							</el-form-item>
						</template>
						<el-form-item label="模版失效日期" prop="expiration.deadline" >
							<el-date-picker
								v-model="dataForm.rule.expiration.deadline"
								type="datetime"
								placeholder="选择失效时间"
								default-time="12:00:00">
							</el-date-picker>
						</el-form-item>
						<!--  使用范围 -->
						<el-form-item label="使用范围" prop="usage.useType">
							<el-radio-group v-model="dataForm.rule.usage.useType" size="small" @change="handlerChange">
								<el-radio-button :label="1">全场通用</el-radio-button>
								<el-radio-button :label="2">指定分类</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<template v-if="dataForm.rule.usage.useType == 2">
							<el-form-item>
								<el-cascader
									style="width: 70%;"
									v-model="dataForm.rule.usage.goodsType"
									placeholder="请选择分类"
									:options="categoryOptions"
									:props="categorySetting"
									filterable>
								</el-cascader>
							</el-form-item>
							
						</template>
					</el-form>
					<el-divider></el-divider>
					<div align="center">
						<el-button type="primary" @click="step = 0">上一步</el-button>
						<el-button type="success" @click="saveCouponTemplate" >下一步：保存</el-button>
					</div>
				</el-card>
			</el-col>
			<!-- 添加完成 -->
			<el-col :span="24" v-show="step==2">
				<el-card class="box-card" style="width:85%;margin:20px auto">
					<result :isSuccess="true" :title="title">
						<template slot="action">
							<el-button type="primary" @click="back">返回列表</el-button>
						</template>
					</result>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { addCouponTemplate , validataCouponTemplateNameExist} from '@/api/activity/couponTemplate'
	import { findCategoryTree } from '@/api/mall/goodsCategory'
	import Result from '@/components/result/result'
	export default {
		name: 'add-couponTemplate',
		data() {
			//校验模版名称重复性
			var validataCouponTemplateName = (rule, value, callback) =>{
				validataCouponTemplateNameExist(value).then(() =>{
					callback();
				}).catch((err) => {
					return callback(new Error(err.data.responseMessage));
				});
			};
			//额度校验
			var validataQuota = (rule, value, callback) =>{
				if (!value) {
					return callback(new Error('请输入优惠券额度'));
				}
				var reg = /^\+?[1-9][0-9]*$/
				if(new RegExp(reg).test(value) == false){
					return callback(new Error('只能输入正整数'));
				}
				//如果是折扣券 则校验参数值为1-100内正整数
				if(this.dataForm.category == '002'){
					if(value > 100 || value < 1){
						return callback(new Error('请输入[1-100]之间的数字'));
					}
				}
				callback();
			};
			
			//使用基准校验
			var validataBase = (rule, value, callback) =>{
				if(this.dataForm.category == '002'){
					callback();
				}
				if (!value) {
					return callback(new Error('请输入优惠券使用门槛额度'));
				}
				var reg = /^\+?[1-9][0-9]*$/
				if(new RegExp(reg).test(value) == false){
					return callback(new Error('只能输入非0正整数'));
				}
				callback();
			};
			
			//数字校验 非0正整数
			var validataNumber = (rule, value, callback) =>{
				var reg = /^\+?[1-9][0-9]*$/
				if(new RegExp(reg).test(value) == false){
					return callback(new Error('只能输入非0正整数'));
				}
				callback();
			};
			
			//校验有效间隔
			var validataGap = (rule, value, callback) =>{
				if(this.dataForm.rule.expiration.period == 1){
					callback();
				}
				if (!value) {
					return callback(new Error('请输入有效间隔'));
				}
				var reg = /^\+?[1-9][0-9]*$/
				if(new RegExp(reg).test(value) == false){
					return callback(new Error('只能输入非0正整数'));
				}
				callback();
			};
			
			return {
				dataForm: {
					name: '',
					logo: '',
					desc: '',
					category: '',
					productLine: '',
					count: '',
					target: '',
					rule:{
						discount:{
							quota:'',
							base:'',
							couponCategory:'', //冗余字段用于优惠券内部校验
						},
						expiration:{
							period:'',
							gap:'',
							deadline:'',
						},
						limitation:'',
						usage:{
							province:'',
							city:'',
							goodsType:'', //当为全平台通用时候此值为空
							useType:'', //使用类别 1.全平台通用 2.指令品类通用 
						}
					}
				},
				dataCouponBaseRule: {
					name: [
						{ required: true, message: '请输入优惠券模版名称',trigger: 'blur'},
						{ validator: validataCouponTemplateName, trigger: 'blur' }
					],
					category: [
						{ required: true, message: '请选择优惠券类别',trigger: 'blur'},
					],
					productLine: [
						{ required: true, message: '请选择产品线',trigger: 'blur'},
					],
					count: [
						{ required: true, message: '请录入优惠券发行量',trigger: 'blur'},
						{ validator: validataNumber, trigger: 'blur' }
					],
					target: [
						{ required: true, message: '请选择优惠券目标用户',trigger: 'blur'},
					],
				},
				dataCouponRule:{
					'discount.quota' : [
						{ validator: validataQuota, trigger: 'blur' }
					],
					'discount.base':[
						{ validator: validataBase, trigger: 'blur' }
					],
					limitation:[
						{ required: true, message: '请输入优惠券用户领取最大数量',trigger: 'blur'},
						{ validator: validataNumber, trigger: 'blur' }
					],
					'expiration.gap':[
						{ validator: validataGap, trigger: 'blur' }
					],
					'expiration.period':[
						{ required: true, message: '请选择有效期规则',trigger: 'blur'},
					],
					'usage.useType':[
						{ required: true, message: '请选择优惠券使用范围',trigger: 'blur'},
					],
					'expiration.deadline':[
						{ required: true, message: '请选择优惠券模版失效时间',trigger: 'blur'},
					]
				},
				step:0,
				templateCategoryOptions:[
					//等等
					{
						label: '满减券',
						value: '001'
					},
					{
						label: '折扣券',
						value: '002'
					},
					{
						label: '立减券',
						value: '003'
					},
				],
				productLineOptions:[
					{
						label: '微商城',
						value: 1
					},
				],
				categoryOptions:[],
				categorySetting: {
					value: "code",
					label: "categoryName",
					children: "children",
					multiple: true ,
					emitPath:false //只返回最后一个节点的值
				},
				title:'添加成功'
				
				
			}
		},
		components:{
			Result
		},
		methods: {
			back() {
				this.$router.go(-1)
			},
			perfectRules(){
				this.$refs.dataCouponBaseForm.validate(valid => {
					if (valid) {
						this.step = 1;
					} else {
						return false;
					}
				});
			},
			saveCouponTemplate(){
				this.$refs.dataCouponRuleForm.validate(valid => {
					if (valid) {
						addCouponTemplate(this.dataForm).then(res => {
							if(res.data.responseCode == 200){
								this.step = 2;
							}
						}).catch(err =>{
							this.$message.error(err.data.responseMessage)
						})
					} else {
						return false;
					}
				});
			},
			handlerChange(val){
				if(val == 2) {
					if(this.categoryOptions.length == 0){
						this.initCategoryTree();
					}
				}
			},
			//初始化分类树
			initCategoryTree(){
				findCategoryTree().then(res =>{
					this.categoryOptions = this.getTreeData(res.data.responseData)
				})
			},
			getTreeData(data){
				for(var i=0;i<data.length;i++){
					if(data[i].children.length<1){
						data[i].children=undefined;
					}else {
						this.getTreeData(data[i].children);
					}
				}
				return data;
			},
			handlerChangeCategory(val){
				console.log(val)
				this.dataForm.rule.discount.couponCategory = val
			}
		}
	}
</script>

<style>
.input-box {
	width: 80%;
} 
</style>
